<template>
  <div class="app-container">
    <div class="option">
      <el-date-picker v-model="req.day" placeholder="请选择日期" value-format="yyyy-MM-dd"></el-date-picker>
      <el-input v-model="req._memberName_" placeholder="请输入成员名称" style="width: 200px;"></el-input>
      <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
      <el-button type="info" icon="el-icon-search" @click="onReset">重置</el-button>
      <!-- <el-button type="success" icon="el-icon-search" @click="onDerive">导出</el-button> -->
    </div>
    <el-table :data="list" border style="width: 100%">
      <el-table-column type="index" label="序号" width="60" align="center" show-overflow-tooltip>
        <template slot-scope="{ $index }">
          {{ $index + 1 + (req.page - 1) * req.pageSize }}
        </template>
      </el-table-column>
      <el-table-column prop="memberName" label="作业人员" min-width="120" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="routes" label="责任道路" min-width="120" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="" label="作业时长/要求时长" min-width="120" align="center" show-overflow-tooltip>
        <template slot-scope="{ row }">
          <span>{{ row.workHourReal }}</span>/
          <span>{{ row.workHour }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="" label="异常数（次）" min-width="120" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="" label="完成率" width="140" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.workHourReal && row.workHour && (row.workHourReal / row.workHour * 100).toFixed(0) + '%' || '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="avgAreaPerHour" label="时效(m²/h)" width="140" align="center"></el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="{ row }">
          <el-tag size="small" @click="onDetail(row)">查看</el-tag>
          <!-- <el-tag type="success" size="small" style="margin: 0 10px;">导出</el-tag>
          <el-tag type="danger" size="small">删除</el-tag> -->
        </template>
      </el-table-column>
    </el-table>
    <Pagination v-show="total" :total="total" :page.sync="req.page" :limit.sync="req.pageSize" @pagination="getList"></Pagination>

    <el-dialog :visible="visible" title="详情" :before-close="onClose">
      <el-table :data="workList">
        <el-table-column label="路段名称" prop="name"></el-table-column>
        <el-table-column label="速度" prop="speed"></el-table-column>
        <el-table-column label="长度" prop="length"></el-table-column>
        <el-table-column label="开始时间">
          <template slot-scope="{ row }">
            {{ setTime(row.start)  }}
          </template>
        </el-table-column>
        <el-table-column label="结束时间">
          <template slot-scope="{ row }">
            {{ setTime(row.end)  }}
          </template>
        </el-table-column>
        <el-table-column label="预测类型 ">
          <template slot-scope="{ row }">
            {{ ['未知', '作业', '休息', '路过'][row.type]  }}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { getMemberWorkDaily } from "@/api/attendMemberWork";

export default {
  data() {
    return {
      req: {
        page: 1,
        pageSize: 10,
      },
      total: 0,
      list: [],
      visible: false,
      workList: [],
    };
  },
  methods: {
    getList() {
      getMemberWorkDaily(this.req).then(({ data, total }) => {
        this.list = data;
        this.total = total;
      });
    },
    onReset() {
      this.req = {
        page: 1,
        pageSize: 10,
      };
      this.getList();
    },
    onDerive() {},
    onDetail(item) {
      if (item.workPath) {
        this.workList = JSON.parse(item.workPath);
        this.visible = true;
        console.log(this.workList);
      } else {
        this.$message.warning("暂无数据");
      }
    },
    setTime(time) {
      if (!time) return "";
      // 时间格式化
      let date = new Date(time);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();

      let hour = date.getHours();
      let minute = date.getMinutes();
      let second = date.getSeconds();

      return (
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        second
      );
    },
    onClose() {
      this.detail = null;
      this.visible = false;
    },
  },
  mounted() {
    this.getList();
  },
};
</script>

<style lang="scss" scoped>
.option {
  padding-bottom: 20px;
  & > * {
    margin-right: 10px;
  }
}
</style>